<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid blue;"></canvas>
	</body>
	<script>
		var canvas = document.getElementById('canvas')
		var cxt = canvas.getContext('2d')
		canvas.width = 550;
		canvas.height = 400;
		var img = new Image();
		img.src = "img/princess.png"
		img.onload = function() {
			cxt.drawImage(img, 10, 10);
			var imgdata = cxt.getImageData(10, 10, 120, 120);
			var data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				data[i + 0] = 255 - data[i + 0]
				data[i + 1] = 255 - data[i + 1]
				data[i + 2] = 255 - data[i + 2]
			}
			cxt.putImageData(imgdata, 140, 10);

			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				var avg = data[i + 0] * 0.3 + data[i + 1] * 0.6 + data[i + 2] * 0.1
				data[i + 0] = avg
				data[i + 1] = avg
				data[i + 2] = avg
			}
			cxt.putImageData(imgdata, 270, 10);

			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				var a = 50
				data[i + 0] += a
				data[i + 1] += a
				data[i + 2] += a
			}
			cxt.putImageData(imgdata, 10, 140);
			for(var i = 0; i < data.length; i += 4) {
				var a = -100
				data[i + 0] += a
				data[i + 1] += a
				data[i + 2] += a
			}
			cxt.putImageData(imgdata, 140, 140);

			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				r = data[i + 0]
				g = data[i + 1]
				b = data[i + 2]
				data[i + 0] = r * 0.39 + g * 0.76 + b * 0.18
				data[i + 1] = r * 0.35 + g * 0.68 + b * 0.16
				data[i + 2] = r * 0.27 + g * 0.53 + b * 0.13
			}
			cxt.putImageData(imgdata, 270, 140);
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				r = data[i + 0]
				g = data[i + 1]
				b = data[i + 2]
				var avg = (r + g + b) / 3
				data[i + 0] = avg
				data[i + 1] = 0
				data[i + 2] = 0
			}
			cxt.putImageData(imgdata, 10, 270);
			
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				r = data[i + 0]
				g = data[i + 1]
				b = data[i + 2]
				var avg = (r + g + b) / 3
				data[i + 0] = 0
				data[i + 1] = avg
				data[i + 2] = 0
			}
			cxt.putImageData(imgdata, 140, 270);
			
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				r = data[i + 0]
				g = data[i + 1]
				b = data[i + 2]
				var avg = (r + g + b) / 3
				data[i + 0] = 0
				data[i + 1] = 0
				data[i + 2] = avg
			}
			cxt.putImageData(imgdata, 270, 270);
		}
	</script>

</html>